
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animate.css | Just-add-water CSS Animations</title>
<link rel="stylesheet" href="animate.css"/>
<link rel="stylesheet" href="style.css"/>
<link href='//fonts.googleapis.com/css?family=Raleway:400,100,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta charset="utf-8">
<meta name="keywords" content="css animation, animation, css3, webkit, mozilla, w3c, dan eden, @_dte, animated, animate.css, dan eden"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="//modernizr.com/downloads/modernizr-latest.js" type="text/javascript"></script>
</head>
<body>
 
<script type="text/javascript">
(function(){
  var bsa = document.createElement('script');
	 bsa.type = 'text/javascript';
	 bsa.async = true;
	 bsa.src = '//s3.buysellads.com/ac/bsa.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
 
<header role="banner">
<h1 class="animated bounceInDown">Animate.css<span class="particle particle--c"></span><span class="particle particle--a"></span><span class="particle particle--b"></span></h1>
</header>
<div class="animated fadeIn container">
<div class="content">
<div class="ad">
 
<div id="bsap_1268756" class="bsarocks bsap_e004eb724b6bd850ab5d3f9adb2c1419"></div>
<a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a>
 
</div>
<p><code>animate.css</code> is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.</p>
<p class="aligncenter"><a class="butt butt-yellow" href="build">Create custom build</a> <em>or</em> <a class="butt" href="https://github.com/daneden/animate.css">Download on Github</a></p>
<div class="sandbox">
<div id="animateTest">
<p>I fight for the user.</p>
</div>
</div>
<h3>Attention seekers</h3>
<a class="butt butt-small" data-test='flash'>flash</a>
<a class="butt butt-small" data-test='bounce'>bounce</a>
<a class="butt butt-small" data-test='shake'>shake</a>
<a class="butt butt-small" data-test='tada'>tada</a>
<a class="butt butt-small" data-test='swing'>swing</a>
<a class="butt butt-small" data-test='wobble'>wobble</a>
<a class="butt butt-small" data-test='pulse'>pulse</a>
<h3>Flippers</h3>
<a class="butt butt-small" data-test='flip'>flip</a>
<a class="butt butt-small" data-test='flipInX'>flipInX</a>
<a class="butt butt-small" data-test='flipOutX'>flipOutX</a>
<a class="butt butt-small" data-test='flipInY'>flipInY</a>
<a class="butt butt-small" data-test='flipOutY'>flipOutY</a>
<h3>Fading entrances</h3>
<a class="butt butt-small" data-test='fadeIn'>fadeIn</a>
<a class="butt butt-small" data-test='fadeInUp'>fadeInUp</a>
<a class="butt butt-small" data-test='fadeInDown'>fadeInDown</a>
<a class="butt butt-small" data-test='fadeInLeft'>fadeInLeft</a>
<a class="butt butt-small" data-test='fadeInRight'>fadeInRight</a>
<a class="butt butt-small" data-test='fadeInUpBig'>fadeInUpBig</a>
<a class="butt butt-small" data-test='fadeInDownBig'>fadeInDownBig</a>
<a class="butt butt-small" data-test='fadeInLeftBig'>fadeInLeftBig</a>
<a class="butt butt-small" data-test='fadeInRightBig'>fadeInRightBig</a>
<h3>Fading exits</h3>
<a class="butt butt-small" data-test='fadeOut'>fadeOut</a>
<a class="butt butt-small" data-test='fadeOutUp'>fadeOutUp</a>
<a class="butt butt-small" data-test='fadeOutDown'>fadeOutDown</a>
<a class="butt butt-small" data-test='fadeOutLeft'>fadeOutLeft</a>
<a class="butt butt-small" data-test='fadeOutRight'>fadeOutRight</a>
<a class="butt butt-small" data-test='fadeOutUpBig'>fadeOutUpBig</a>
<a class="butt butt-small" data-test='fadeOutDownBig'>fadeOutDownBig</a>
<a class="butt butt-small" data-test='fadeOutLeftBig'>fadeOutLeftBig</a>
<a class="butt butt-small" data-test='fadeOutRightBig'>fadeOutRightBig</a>
<h3>Sliders</h3>
<a class="butt butt-small" data-test='slideInDown'>slideInDown</a>
<a class="butt butt-small" data-test='slideInLeft'>slideInLeft</a>
<a class="butt butt-small" data-test='slideInRight'>slideInRight</a>
<a class="butt butt-small" data-test='slideOutUp'>slideOutUp</a>
<a class="butt butt-small" data-test='slideOutLeft'>slideOutLeft</a>
<a class="butt butt-small" data-test='slideOutRight'>slideOutRight</a>
<h3>Bouncing entrances</h3>
<a class="butt butt-small" data-test='bounceIn'>bounceIn</a>
<a class="butt butt-small" data-test='bounceInDown'>bounceInDown</a>
<a class="butt butt-small" data-test='bounceInUp'>bounceInUp</a>
<a class="butt butt-small" data-test='bounceInLeft'>bounceInLeft</a>
<a class="butt butt-small" data-test='bounceInRight'>bounceInRight</a>
<h3>Bouncing exits</h3>
<a class="butt butt-small" data-test='bounceOut'>bounceOut</a>
<a class="butt butt-small" data-test='bounceOutDown'>bounceOutDown</a>
<a class="butt butt-small" data-test='bounceOutUp'>bounceOutUp</a>
<a class="butt butt-small" data-test='bounceOutLeft'>bounceOutLeft</a>
<a class="butt butt-small" data-test='bounceOutRight'>bounceOutRight</a>
<h3>Rotating entrances</h3>
<a class="butt butt-small" data-test='rotateIn'>rotateIn</a>
<a class="butt butt-small" data-test='rotateInDownLeft'>rotateInDownLeft</a>
<a class="butt butt-small" data-test='rotateInDownRight'>rotateInDownRight</a>
<a class="butt butt-small" data-test='rotateInUpLeft'>rotateInUpLeft</a>
<a class="butt butt-small" data-test='rotateInUpRight'>rotateInUpRight</a>
<h3>Rotating exits</h3>
<a class="butt butt-small" data-test='rotateOut'>rotateOut</a>
<a class="butt butt-small" data-test='rotateOutDownLeft'>rotateOutDownLeft</a>
<a class="butt butt-small" data-test='rotateOutDownRight'>rotateOutDownRight</a>
<a class="butt butt-small" data-test='rotateOutUpLeft'>rotateOutUpLeft</a>
<a class="butt butt-small" data-test='rotateOutUpRight'>rotateOutUpRight</a>
<h3>Lightspeed</h3>
<a class="butt butt-small" data-test='lightSpeedIn'>lightSpeedIn</a>
<a class="butt butt-small" data-test='lightSpeedOut'>lightSpeedOut</a>
<h3>Specials</h3>
<a class="butt butt-small" data-test='hinge'>hinge</a>
<a class="butt butt-small" data-test='rollIn'>rollIn</a>
<a class="butt butt-small" data-test='rollOut'>rollOut</a>
</div>
<hr>

<footer>
<p class="cf">A thing made by <a href="http://twitter.com/_dte">Dan Eden</a> <span class="alignright"><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="_dte">Tweet</a><script type="text/javascript" data-rocketsrc="//platform.twitter.com/widgets.js"></script></span></p>
</footer>
</div>
<script type="text/javascript">
	function testAnim(x) {
		$('#animateTest').removeClass().addClass(x + ' animated');
		var wait = window.setTimeout( function(){
			$('#animateTest').removeClass()},
			1300
		);
	}

	$(function(){
		$pos = $('.sandbox').offset().top - 0;

		$(window).on('scroll', function(){
			if($(window).scrollTop() >= $pos) {
				$('.sandbox').addClass('fixed');
			} else {
				$('.sandbox').removeClass('fixed');
			}
		});
	});

	$(document).ready(function(){
		$('a[data-test]').click(function(){
			var anim = $(this).attr('data-test');
			testAnim(anim);
		});
	});

	</script>
</body>
</html>